<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {queryTree} from '@/api/set/goodscategory'
import {search} from '@/api/set/goods'
import {ElMessage} from "element-plus";
//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})
//分页参数
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}

/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}
//声明事件
const emits = defineEmits(["close", "choose"])
const data= ref([])
const defaultProps={
  children:"children",
  label:"name"
}
//类别点击事件
function handleNodeClick(data){
  categorycode.value=data.code
  initData()
}
//数据
const tableData=ref([])
//查询类别树
async function initTree(){
  let res = await queryTree()
  if (res.code==200){
    data.value=res.data;
  }
}
//商品编码
const goodscode=ref("");
const goodsname=ref("");
const categorycode=ref("");
async function initData(){
  let data={
    page: page.value,
    pageSize: pageSize.value,
    code:goodscode.value,
    name:goodsname.value,
    categoryCode:categorycode.value
  }
  let res = await search(data);
  if (res.code==200){
    tableData.value=res.data.list
    page.value = res.data.page
    pageSize.value = res.data.pageSize
    total.value = res.data.total
  }
}
//声明同名引用
const goodslist = ref(null);
//选择
function choose(){
  let rows=goodslist.value.getSelectionRows();
  if (rows.length==0){
    ElMessage({
      message: '保存商品',
      type: 'warning'
    })
    return
  }
  //将选中的商品传给父组件
  emits("choose",rows)
  //关闭
  cls()
}
//关闭窗口
function cls() {
  //抛出自定义事件
  emits("close");
}
//生命周期-----------
onMounted(()=>{
  initTree()
  initData()
})
</script>

<template>
<div>
  <el-dialog :model-value="visible" :close-on-click-modal="false" title="商品选择" width="800" @close="cls">
<!--  工具条  -->
    <div class="toolbar">
      <el-button type="primary" size="small" @click="choose">确定</el-button>
      <el-button size="small" @click="cls">取消</el-button>
    </div>
<!--  工作区  -->
    <el-row>
      <el-col :span="6">
        <el-tree
          class="tree"
          style="max-width:600px"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="18">
<!--    商品列表    -->
        <el-table :data="tableData" style="width: 100%" border stripe ref="goodslist">
          <el-table-column type="selection" width="55" header-align="center" align="center"/>
          <el-table-column type="index" label="序号" width="55"/>
          <el-table-column prop="code" label="商品编码" width="120" header-align="center"/>
          <el-table-column prop="name" label="商品名称" width="120" header-align="center"/>
          <el-table-column prop="spec" label="规格" width="120" header-align="center"/>
          <el-table-column prop="unit" label="单位" width="106" header-align="center" align="center"/>
        </el-table>
        <div style="margin:40px auto; width: 500px;">
          <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
                         :page-sizes="[10,20,30,40,50,100]" layout="total,sizes,prev, pager, next,jumper" :total="total"/>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>

<style scoped>
.toolbar{
  height:50px;
  line-height: 50px;
  padding-left: 20px;
}
.tree{
  border: #ebeef5 1px solid;
}
</style>
